/* === Icons === */
i.icon {
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;

    &.icon-back {
        width: 12px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='@{themeColor}'/></svg>");
    }
    &.icon-forward {
        width: 12px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='@{themeColor}'/></svg>");
    }
    &.icon-bars {
        width: 21px;
        height: 14px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'><path fill='@{themeColor}' d='M0,0h2v2H0V0z M4,0h17v1H4V0z M0,6h2v2H0V6z M4,6h17v1H4V6z M0,12h2v2H0V12z M4,12h17v1H4V12z'/></svg>");
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2ddpx) {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='@{themeColor}' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
            height: 13px;
        }
    }
    &.icon-camera {
        width: 25px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 20'><path fill='#8C8D92' d='M13.3,5.5c-2.7,0-5,2.2-5,5s2.2,5,5,5c2.7,0,5-2.2,5-5S16,5.5,13.3,5.5z'/><path fill='#8C8D92' d='M22.8,1.8h-3.3c-0.2-1.3-1-1.8-2-1.8H8.1c-1,0-1.8,0.4-2,1.8H2.8C1.4,1.8,0,2.8,0,4.2v12.6 c0,1.4,1.4,2.5,2.8,2.5h20c1.4,0,2.2-1.1,2.2-2.5V4.2C25,2.8,24.2,1.8,22.8,1.8z M3.5,6.4C2.6,6.4,2,5.8,2,5c0-0.8,0.7-1.5,1.5-1.5 S5,4.1,5,5C5,5.8,4.3,6.4,3.5,6.4z M13.3,16.8c-3.5,0-6.3-2.7-6.3-6.2c0-3.3,2.5-6.2,5.7-6.2h1.2c3.2,0,5.7,2.9,5.7,6.2 C19.6,14.1,16.7,16.8,13.3,16.8z'/></svg>");
    }
    //&.icon-f7 {
    //    width: 29px;
    //    height: 29px;
    //    background-image: url("@{imgBaseUrl}/i-f7-ios.png");
    //    border-radius: 6px;
    //}
    &.icon-form-name {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-name-ios.svg");
    }
    &.icon-form-password {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-password-ios.svg");
    }
    &.icon-form-email {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-email-ios.svg");
    }
    &.icon-form-calendar {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-calendar-ios.svg");
    }
    &.icon-form-tel {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-tel-ios.svg");
    }
    &.icon-form-gender {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-gender-ios.svg");
    }
    &.icon-form-toggle {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-toggle-ios.svg");
    }
    &.icon-form-comment {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-comment-ios.svg");
    }
    &.icon-form-settings {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-settings-ios.svg");
    }
    &.icon-form-url {
        width: 29px;
        height: 29px;
        background-image: url("@{imgBaseUrl}/i-form-url-ios.svg");
    }
    &.icon-next, &.icon-prev {
        width: 15px;
        height: 15px;
    }
    &.icon-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    &.icon-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    &.icon-plus {
        width: 25px;
        height: 25px;
        font-size: 31px;
        line-height: 20px;
        text-align: center;
        font-weight: 100;
    }

    &.icon-comment {
        background-size: 20px 20px;
        width: 36px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'><g><path fill='@{color-Cg}' d='M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8s4.029-8 9-8c4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM7.209 6.912c-2.069 1.681-3.209 3.843-3.209 6.088 0 1.259 0.35 2.481 1.039 3.63 0.711 1.185 1.781 2.268 3.093 3.133 0.949 0.625 1.587 1.623 1.755 2.747 0.056 0.375 0.091 0.753 0.105 1.129 0.233-0.194 0.461-0.401 0.684-0.624 0.755-0.755 1.774-1.172 2.828-1.172 0.168 0 0.336 0.011 0.505 0.032 0.655 0.083 1.323 0.125 1.987 0.126v4c-0.848-0-1.68-0.054-2.492-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13 8.702 0 15.781 5.644 15.995 12.672-1.284-0.572-2.683-0.919-4.133-1.018-0.36-1.752-1.419-3.401-3.070-4.742-1.104-0.897-2.404-1.606-3.863-2.108-1.553-0.534-3.211-0.804-4.928-0.804s-3.375 0.271-4.928 0.804c-1.46 0.502-2.76 1.211-3.863 2.108z' /></g></svg>");
    }
    &.icon-heart-empty {
        background-size: 20px 20px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{color-Cg}' d='M29.714 10.643q0-1.446-.384-2.554t-.982-1.76-1.455-1.063-1.68-.554-1.75-.143-2 .455-1.972 1.143-1.544 1.286-1.07 1.098q-.322.393-.876.393t-.875-.393q-.43-.5-1.07-1.098t-1.546-1.286-1.974-1.143-2-.455-1.75.143-1.68.554T3.653 6.33 2.67 8.09t-.384 2.553q0 3 3.34 6.34l10.374 10L26.357 17q3.357-3.357 3.357-6.357zm2.286 0q0 3.946-4.09 8.036L16.787 29.392q-.32.32-.786.32t-.786-.32L4.07 18.643q-.178-.143-.49-.464t-.99-1.17-1.215-1.742-.955-2.16T0 10.642Q0 6.713 2.268 4.5t6.268-2.214q1.107 0 2.26.384t2.142 1.036 1.705 1.223T16 6.142q.643-.643 1.357-1.214t1.705-1.224 2.143-1.036 2.26-.384q4 0 6.267 2.214T32 10.643z' /></g></svg>");
    }
    &.icon-heart {
        background-size: 20px 20px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{color-Cg}' d='M16 29.714q-.464 0-.786-.32L4.07 18.643q-.178-.144-.49-.465t-.99-1.17-1.215-1.742-.955-2.16T0 10.642Q0 6.713 2.268 4.5t6.268-2.214q1.107 0 2.26.384t2.142 1.036 1.705 1.223T16 6.142q.643-.643 1.357-1.214t1.705-1.224 2.143-1.036 2.26-.384q4 0 6.267 2.214T32 10.643q0 3.946-4.09 8.036L16.787 29.392q-.32.32-.786.32z' /></g></svg>");
    }
    &.icon-pencil {
        background-size: 16px 16px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M12 20l4-2L30 4l-2-2-14 14-2 4zm-2.96 7.097c-.988-2.085-2.05-3.15-4.136-4.137L8 14.435 12 12 24 0h-6L6 12 0 32l20-6 12-12V8L20 20l-2.434 4z' /></g></svg>");
    }
    &.icon-share {
        background-size: 20px 20px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{color-Cg}' d='M32 11.43q0 .463-.34.803l-9.142 9.143q-.34.34-.804.34t-.804-.34-.34-.804v-4.57h-4q-1.75 0-3.133.106t-2.75.384-2.375.76-1.884 1.24-1.43 1.804-.865 2.473T3.82 26q0 .983.09 2.197 0 .107.044.42T4 29.09q0 .268-.153.446t-.42.18q-.286 0-.5-.305-.125-.16-.232-.392t-.24-.536-.19-.43Q0 22.965 0 20q0-3.555.946-5.947Q3.837 6.857 16.57 6.857h4v-4.57q0-.465.338-.805t.804-.34.804.34l9.143 9.143q.338.34.338.804z' /></g></svg>");
    }
    &.icon-star-empty {
        background-size: 20px 20px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{color-Cg}' d='M32 12.408L20.944 10.8 16 .784 11.056 10.8 0 12.41l8 7.798-1.89 11.01L16 26.02l9.89 5.2L24 20.205l8-7.798zm-16 11.14l-6.983 3.67 1.334-7.776-5.65-5.507 7.81-1.134L16 5.727l3.493 7.075 7.807 1.135-5.65 5.507 1.334 7.776L16 23.548z' /></g></svg>");
    }
    &.icon-star {
        background-size: 20px 20px;
        width: 32px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{color-Cg}' d='M32 12.408L20.944 10.8 16 .784 11.056 10.8 0 12.41l8 7.798-1.89 11.01L16 26.02l9.89 5.2L24 20.205l8-7.798z' /></g></svg>");
    }

    &.icon-add {
        background-size: 20px 20px;
        width: 22px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 32'><g><path fill='@{themeColor}' d='M10.25 26.875V4.5h1.938v22.375H10.25zM0 16.625V14.75h22.375v1.875H0z' /></g></svg>");
    }

    &.icon-person {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zM13.313 5.188s1.563-.813 3.063-.813c.688 0 .813.438 1.438.5.875.063 3.188 1.188 3.625 2.563.312 1.063.437 3.375.312 4.813-.063.5-.25.94-.313 1.44-.064.187.937.124.874.312-.125.625-.625 2.875-.875 3.5-.064.25-.626.313-.69.5-.437.875-.312 2.75-.562 3.438-.25.563-.5.313-.75 1.125-.438 1.5.313 2.625.75 2.938.875.625 3.75 1.625 5 2.125.25.125-2.188 3.125-6.25 3.688-5.5.75-13-1.25-12.375-3.688 0 0 3.75-1.063 4.5-1.313s1.063-.938 1.25-1.625c.438-1.625-.188-1.688-.813-3.25-.25-.688-.188-2.375-.438-3.063s-.5.063-.75-.563c-.313-.688-.375-.375-.625-1.688-.063-.375-.375-1.688-.438-2.125-.064-.312.562 0 .562-.312 0-1.875-.938-4.313.5-6.25.875-1.188 1.063-1.375 3-2.25z' /></g></svg>");
    }

    &.icon-person-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16zM13.313 5.188c-1.938.875-2.125 1.063-3 2.25-1.438 1.938-.5 4.375-.5 6.25 0 .313-.625 0-.563.313.063.44.375 1.75.438 2.126.25 1.313.313 1 .625 1.688.25.625.5-.125.75.563s.188 2.375.438 3.063c.626 1.563 1.25 1.625.814 3.25-.188.688-.5 1.375-1.25 1.625s-2.625.813-2.625.813 3.624 2.438 7.624 2.438 8-2.375 7.688-2.5c-1.313-.5-2.938-1.125-3.563-1.563-.44-.313-1.19-1.438-.75-2.938.25-.813.5-.563.75-1.125.25-.688.124-2.563.562-3.438.063-.188.625-.25.688-.5.25-.625.75-2.875.875-3.5.063-.188-.938-.125-.875-.313.063-.5.25-.94.313-1.44.125-1.437 0-3.75-.313-4.812-.438-1.375-2.75-2.5-3.625-2.563-.625-.063-.75-.5-1.438-.5-1.5 0-3.063.813-3.063.813z' /></g></svg>");
    }

    &.icon-plane {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M32 0L17.562 32l-5.25-11.813L0 14.624zm-4.125 3.438l-24.5 11.188 9.438 4.313zm.25 1.687L13.75 19.938l3.875 8.625z' /></g></svg>");
    }

    &.icon-plane-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M31.875 1.125L18 32l-5.125-11.438zm-20 18.438L0 14.25 30.875.125z' /></g></svg>");
    }

    &.icon-compass {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zm18.313 1.688l-3.563-3.625L25.125 7.25zm.062 0L7.062 25.376l7.688-11.313zm-1.5-.125l-2-2-4.25 6.188z' /></g></svg>");
    }

    &.icon-compass-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M18.313 17.688L25.126 7.25 14.75 14.063l-7.687 11.25zm-7.625 4l4.188-6.125 1.938 1.938zM16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16z' /></g></svg>");
    }

    &.icon-search {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M23.063 12.188c0-6-4.875-10.938-10.875-10.938S1.25 6.188 1.25 12.188s4.938 10.875 10.938 10.875 10.875-4.875 10.875-10.875zM0 12.188C0 5.5 5.5 0 12.188 0s12.125 5.5 12.125 12.188-5.438 12.125-12.125 12.125S0 18.875 0 12.188zm19.688 9.187l1.813-1.813L31.69 29.75l-1.814 1.813z' /></g></svg>");
    }

    &.icon-search-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M21.75 12.188c0-5.313-4.25-9.625-9.563-9.625s-9.625 4.313-9.625 9.625 4.313 9.563 9.625 9.563 9.563-4.25 9.563-9.562zm-21.75 0C0 5.5 5.5 0 12.188 0s12.125 5.5 12.125 12.188-5.438 12.125-12.125 12.125S0 18.875 0 12.188zm19.688 9.187l1.813-1.813L31.69 29.75l-1.814 1.813z' /></g></svg>");
    }

    &.icon-time {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zm16 1.938H7.687v-1.313h7.688v-11.5h1.25v12.813H16z' /></g></svg>");
    }

    &.icon-time-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16zm0-14.062h.625V5.125h-1.25v11.5H7.687v1.313H16z' /></g></svg>");
    }

}
